<% if project.forked? %>
  <div class="mb-2">
    <%= link_to "← Back to original project", project_path(project.parent_project), class: "btn btn-ghost" %>
  </div>
<% end %>
<div class="flex flex-col md:flex-row items-center justify-between mb-4">
  <div class="self-stretch">
    <div>
      <%= render "projects/status", project: project %>
    </div>
    <h3 class="text-lg font-medium flex items-center gap-2 my-2">
      <%= render "projects/favicon", project: project %>
      <%= project.name %>
    </h3>
    <% if project.domains.any? %>
      <div class="my-3">
        <% project.domains.each do |domain| %>
          <span>
            <%= link_to domain.domain_name, "https://#{domain.domain_name}", target: "_blank", class: "text-sm text-ellipsis" %>
            <iconify-icon icon="lucide:external-link"></iconify-icon>
          </span>
        <% end %>
      </div>
    <% end %>
    <div class="text-sm flex flex-row">
      <%= link_to project.link_to_view, target: "_blank" do %>
        <% if project.git? %>
          <div class="flex flex-row items-center gap-1">
            <% if project.github? %>
              <iconify-icon icon="lucide:github"></iconify-icon>
            <% elsif project.gitlab? %>
              <iconify-icon icon="lucide:gitlab"></iconify-icon>
            <% end %>
            <span class="underline mr-2"><%= project.repository_url %></span>
            <iconify-icon icon="lucide:git-branch"></iconify-icon>
            <span class="underline"><%= project.branch %></span>
          </div>
        <% else %>
          <div class="flex flex-row items-center gap-1">
            <iconify-icon icon="logos:docker-icon"></iconify-icon>
            <span class="underline"><%= project.repository_url %></span>
          </div>
        <% end %>
      <% end %>

      <%= link_to(
        project.cluster,
        target: "_blank",
        class: "underline",
      ) do %>
        <div class="ml-6 flex flex-row items-center gap-1">
          <iconify-icon icon="devicon:kubernetes"></iconify-icon>
          <div><%= project.cluster.name %></div>
          <div><iconify-icon icon="lucide:slash"></iconify-icon></div>
          <div><%= project.namespace %></div>
        </div>
      <% end %>
    </div>
  </div>
  <div class="flex flex-col self-stretch mt-4 lg:mt-0">
    <div class="flex lg:justify-end flex-row">
      <%= button_to restart_project_url(project), class: "btn btn-ghost m-1", data: { turbo: false, disable_with: "Loading..." } do %>
        Restart
      <% end %>
      <% if project.deployable? %>
        <div class="join m-1">
          <%= button_to(
            deploy_project_deployments_url(project),
            class: "btn join-item btn-primary",
            data: { turbo: false, disable_with: "Loading..." },
          ) do %>
            Deploy
          <% end %>
          <div class="dropdown dropdown-end">
            <div tabindex="0" role="button" class="btn join-item btn-primary"><iconify-icon icon="lucide:chevron-down"></iconify-icon></div>
            <ul tabindex="0" class="dropdown-content menu bg-base-200 rounded-box z-[1] w-60 p-2 shadow">
              <li>
                <%= button_to(
                  "Deploy without rebuilding",
                  deploy_project_deployments_url(project, skip_build: true),
                ) %>
              </li>
            </ul>
          </div>
        </div>
      <% else %>
        <div role="tooltip" data-tip="Please add a service to your project to deploy" class="tooltip tooltip-secondary tooltip-left">
          <%= button_to "#", class: "btn btn-primary m-1", disabled: true do %>
            Deploy
          <% end %>
        </div>
      <% end %>
    </div>
    <% if project.has_updates? %>
      <div class="flex lg:justify-end items-center text-gray-500 text-sm italic">
        <iconify-icon icon="lucide:alert-triangle" class="mr-2 text-warning"></iconify-icon> Project has updates that require a deploy to take effect.
      </div>
    <% end %>
  </div>
</div>

<div class="md:card md:card-bordered md:bg-base-100">
  <div class="md:card-body overflow-x-auto">
    <%= render "projects/sidebar", project: project %>

    <div class="pt-4 pb-4">
      <%= yield %>
    </div>
  </div>
</div>
